<!--
 * @Description: 信息模块
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-22 14:15:31
 * @LastEditTime: 2022-09-22 15:50:26
-->
<template>
	<div class="new-title">
		<div class="new-title-img">
			<img src="@/assets/images/news.svg" class="img" v-if="isShowIcon" />
			{{ MenuTitle[local] }}
		</div>
		<div class="new-title-end" @click="toMore">
			{{ $t('pages.home.viewAll', '查看全部') }}
			<i class="low-code iconxiangyou"></i>
		</div>
	</div>
	<div class="official">
		<div v-if="carouselData.length" class="official-right">
			<!-- <CarouselSkeleton v-if="getLoading" /> -->
			<NoData v-if="!carouselData.length"></NoData>
			<template v-else>
				<carousel
					:carouselData="carouselData"
					@onCarousel="onCarousel"
				></carousel>
			</template>
		</div>
		<div class="official-left">
			<!-- <NoticeSkeleton v-if="getLoading" /> -->
			<a-skeleton v-if="getLoading" active :paragraph="{ rows: 5 }" />
			<NoData
				v-else-if="!detailData.length"
				:style="{ height: '260px' }"
			></NoData>
			<Details
				v-else
				:detailData="detailData"
				@handeleDetail="handeleDetail"
			></Details>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Carousel from './Carousel.vue'
import Details from '../Details.vue'
import { NoticeSkeleton, CarouselSkeleton } from './skeleton'
import { tabList } from '../../homeConstant'
import useDetails from './hooks/useDetails'
import NoData from '@/entry_desktop/components/NoData/NoData.vue'

import './index.less'

const {
	detailList,
	toMore,
	handeleDetail,
	carouselData,
	getLoading,
	onCarousel,
	MenuTitle,
	local,
	isShowIcon
} = useDetails()
const headList = ref(tabList)
const detailData = computed(() => {
	return detailList.value
})
</script>
